<template>
  <div id="one">
    <van-sticky :offset-top="0">
      <van-nav-bar title="帐篷露营" left-arrow @click-left="$router.go(-1)" />
    </van-sticky>
    <van-image
      width="100%"
      height="100%"
      :src="require('../../assets/img/hotBg.png')"
    />
    <div id="two" @click="$router.push('/coach')">
      <van-card
        price="2299起"
        desc="2月/3月/4月"
        title="【小镇C位】长白山5日4晚自由行●宿万达锦华度假酒店（双早+滑雪票+温泉票+水乐园+当地接送机 地理位置方便 亲子出游）"
        width="155"
        hight="100"
        :thumb="require('../../assets/img/1.jpg')"
        style="background:none;"
      >
        <template #tags>
          <div class="d1">自由行</div>
          <div class="d2">上海出发</div>
          <van-tag type="danger">雪游纵横</van-tag>
          <van-tag type="primary">性价比推荐</van-tag>
          <van-tag type="primary">买贵退差</van-tag>
          <van-tag type="primary">位置方便</van-tag>
        </template>
        <template #footer>
          <span style="margin-right: 10px">已售440份</span>
          <span style="color: orange">4.5分</span>
        </template>
      </van-card>
    </div>

    <div id="weibu">
      <span><van-icon name="sort" />排序方式</span>
      <span><van-icon name="add" />更多筛选</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>

<style lang="scss" scoped>
template {
  position: relative;
}

#one {
  height: 100%;
}
.van-card {
  height: 100px;
  margin-bottom: 33px;
}
.van-card__price {
  margin: 10px 0;
  color: red;
}
.van-tag {
  margin-right: 6px;
}
.van-card__footer {
  margin: -27px 0;
}
.van-card__content .d1 {
  background-color: #5e6e82;
  opacity: 0.5;
  display: inline-block;
  position: absolute;
  top: 1%;
  left: -37%;
  width: 40px;
  height: 20px;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
}
.van-card__bottom {
  line-height: 14px;
}
.van-card__content .d2 {
  display: inline-block;
  position: absolute;
  top: 29%;
  left: 80%;
  color: #f09;
}
#two {
  height: 636px;
  background-color: #fff;
}
#weibu {
  position: fixed;
  bottom: 0;
  background-color: #3d4a59;
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 46px;
  justify-content: space-around;
  z-index: 1;
}
#weibu > span {
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
#weibu > span .van-icon {
  margin-left: 18px;
  margin-top: 3px;
}

</style>
